.container {
  margin: 0 auto;
  @media screen and (max-width: 576px) {
    width: 100%;
    .row {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      @for $i from 1 to 13 {
        .col-#{$i} {
          grid-column: span #{$i};
        }
      }
    }
  }

  @media screen and (min-width: 576px) {
    width: 540px;
    .row {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 1rem;
      @for $i from 1 to 13 {
        .col-sm-#{$i} {
          grid-column: span #{$i};
        }
      }
    }
  }

  @media screen and (min-width: 768px) {
    width: 540px;
    .row {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 1rem;
      @for $i from 1 to 13 {
        .col-md-#{$i} {
          grid-column: span #{$i};
        }
      }
    }
  }

  @media screen and (min-width: 992px) {
    width: 960px;
    .row {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 1rem;
      @for $i from 1 to 13 {
        .col-lg-#{$i} {
          grid-column: span #{$i};
        }
      }
    }
  }

  @media screen and (min-width: 1200px) {
    width: 1140px;
    .row {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      @for $i from 1 to 13 {
        .col-xl-#{$i} {
          grid-column: span #{$i};
        }
      }
    }
  }
}
